<template>
  <div class="chat-area">
    <div class="message-list" ref="messageListRef">
      <div v-for="(message, index) in messages" 
           :key="index"
           :class="['message-item', message.role]">
        <div class="message-inner">
          <div class="message-content">
            <div class="message-text" v-html="message.content"></div>
            <div class="message-meta" v-if="message.role === 'assistant'">
              <div class="meta-info">
                <span class="token-count">{{ message.tokens || 0 }} tokens</span>
                <span class="response-time" v-if="message.responseTime">
                  耗时 {{ formatResponseTime(message.responseTime) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="input-container">
      <div class="input-wrapper">
        <div class="input-form">
          <textarea 
            v-model="inputMessage" 
            @keyup.enter.exact="sendMessage"
            @keydown.enter.exact.prevent
            @input="handleInput"
            rows="1"
            placeholder="发送消息..."
            :disabled="loading || !isConnected"
            class="input-textarea"
            ref="textarea"
          ></textarea>
          
          <button 
            v-if="loading"
            @click="stopGeneration" 
            class="stop-button"
            title="停止生成"
          >
            <svg class="stop-icon" viewBox="0 0 24 24" fill="none">
              <rect x="6" y="6" width="12" height="12" fill="currentColor"/>
            </svg>
          </button>
          <button 
            v-else
            @click="sendMessage" 
            :disabled="!inputMessage.trim() || !isConnected"
            class="send-button"
          >
            <svg class="send-icon" viewBox="0 0 24 24" fill="none">
              <path d="M7 11L12 6L17 11M12 18V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>

        <div class="input-footer">
          <div class="input-tips">
            <span v-if="!isConnected" class="error-tip">
              未连接到服务器
            </span>
            <span v-else class="normal-tip">
              <kbd>Enter</kbd> 发送 &nbsp; <kbd>Shift + Enter</kbd> 换行
            </span>
          </div>
        </div>
      </div>
      
      <div class="input-bottom-text">
        仅供学习交流使用
      </div>
    </div>
  </div>
</template>

<script setup>
// ... 保持原有的script内容 ...
</script>

<style scoped>

</style> 